﻿@{
    ViewBag.Title = "ViewReport";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/TaskDetail.css" rel="stylesheet" />
<script type="text/javascript">

    var required = '<span style="color:red;font-weight:bold" data-qtip="Bắt buộc nhập">*</span>';

    Ext.Loader.setPath('Ext.ux', 'extjs/ux');

    Ext.require([
        'Ext.data.*',
        'Ext.grid.*',
        'Ext.tree.*'
    ]);
    
    Ext.define('VTV.TaDMS.Extjs.Model.ListWeek', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'StartWeek', mapping: 'StartWeek', type: 'date'
            //convert: function (v, rec) {
            //    if (v) {
            //        var date = new Date(v);
            //        var a = Ext.Date.format(date, 'd/m/Y');
            //        return a;
            //    } else {
            //        return null;
            //    }
            //}
        }, {
            name: 'EndWeek', mapping: 'EndWeek', type: 'date'
            //convert: function (v, rec) {
            //    if (v) {
            //        var date = new Date(v);
            //        var a = Ext.Date.format(date, 'd/m/Y');
            //        return a;
            //    } else {
            //        return null;
            //    }
            //}
        }, {
            name: 'NumberOfWeek', mapping: 'NumberOfWeek', type: 'int'
        }, {
            name: 'Year', mapping: 'Year', type: 'int'
        }, {
            name: 'Display',
            convert: function (v, rec) {
                var startWeek = Ext.Date.format(rec.get('StartWeek'), 'd-m-Y');
                var endWeek = Ext.Date.format(rec.get('EndWeek'), 'd-m-Y');
                var numberOfWeek = rec.get('NumberOfWeek');

                return 'Tuần ' + numberOfWeek + ' : từ ' + startWeek + ' đến ' + endWeek;
            }
        }]
    });

    Ext.define('VTV.TaDMS.Extjs.Model.Report', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'ReportId', mapping: 'ReportId', type: 'int'
        }, {
            name: 'EmployeeId', mapping: 'EmployeeId', type: 'int'
        }, {
            name: 'ReportTitle', mapping: 'ReportTitle', type: 'string'
        }, {
            name: 'CreateDate', mapping: 'CreateDate', type: 'date',
            convert: function (v, rec) {
                if (v) {
                    var date = new Date(v);
                    var a = Ext.Date.format(date, 'd-m-Y');
                    return a;
                } else {
                    return null;
                }
            }
        }, {
            name: 'ReportContent', mapping: 'ReportContent', type: 'string'
        }],
        idProperty: 'ReportId',
        hasMany: { model: 'VTV.TaDMS.Extjs.Model.Employee', name: 'Employee' }
    });
    
    Ext.define('VTV.TaDMS.Extjs.Model.Employee', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'EmployeeId', mapping: 'EmployeeId', type: 'int'
        }, {
            name: 'DepartmentId', mapping: 'DepartmentId', type: 'int'
        }, {
            name: 'FirstName', mapping: 'FirstName', type: 'string'
        }, {
            name: 'LastName', mapping: 'LastName', type: 'string'
        }, {
            name: 'BirthDate', mapping: 'BirthDate', type: 'date'
        }, {
            name: 'Address', mapping: 'Address', type: 'string'
        }, {
            name: 'MobilePhone', mapping: 'MobilePhone', type: 'string'
        }, {
            name: 'Email', mapping: 'Email', type: 'string'
        }, {
            name: 'Note', mapping: 'Note', type: 'string'
        }],
        idProperty: 'EmployeeId',
        belongsTo: 'VTV.TaDMS.Extjs.Model.Report'
    });
    
    Ext.define('VTV.TaDMS.Extjs.Model.ReportTitle', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'ReportTitle', mapping: 'ReportTitle', type: 'string'
        }]
    });

    Ext.onReady(function () {
        Ext.QuickTips.init();
        
        var titleComboStore = Ext.create('Ext.data.Store', {
            model: 'VTV.TaDMS.Extjs.Model.ReportTitle',
            pageSize: 10,
            proxy: {
                type: 'ajax',
                api: {
                    read: '/api/ApiReport/GetTitleComboData'
                },
                reader: {
                    root: 'data',
                    type: 'json',
                    successProperty: 'success',
                    messageProperty: 'message',
                    totalProperty: 'total'
                },
                listeners: {
                    exception: function (proxy, response, operation) {
                        Ext.MessageBox.show({
                            title: 'Lỗi',
                            msg: operation.getError(),
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                        });
                    }
                }
            }
        });

        var weekStore = Ext.create('Ext.data.Store', {
            model: 'VTV.TaDMS.Extjs.Model.ListWeek',
            proxy: {
                type: 'ajax',
                api: {
                    read: '/api/ApiReport/GetListWeek'
                },
                reader: {
                    root: 'data',
                    type: 'json',
                    successProperty: 'success',
                    messageProperty: 'message'
                },
                listeners: {
                    exception: function (proxy, response, operation) {
                        Ext.MessageBox.show({
                            title: 'Lỗi',
                            msg: operation.getError(),
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                        });
                    }
                }
            }
        });

        var reportStore = Ext.create('Ext.data.Store', {
            model: 'VTV.TaDMS.Extjs.Model.Report',
            proxy: {
                type: 'ajax',
                api: {
                    read: '/api/ApiReport/GetReport'
                },
                reader: {
                    root: 'data',
                    type: 'json',
                    successProperty: 'success',
                    messageProperty: 'message',
                    totalProperty: 'total'
                },
                listeners: {
                    exception: function (proxy, response, operation) {
                        Ext.MessageBox.show({
                            title: 'Lỗi',
                            msg: operation.getError(),
                            icon: Ext.MessageBox.ERROR,
                            buttons: Ext.Msg.OK
                        });
                    }
                }
            },
            listeners: {
                load: function (records, successful, eOpts) {
                    if (successful) {
                        var a = successful.data;            
                        tpl.overwrite(panel.body, successful);
                    }
                }
            }
        });
        
        var panel = Ext.create('Ext.Panel', {
            id: 'newPanel',
            title: 'Danh sách báo cáo',
            bodyPadding: '0 10 0 10',
            region: 'center',
            autoScroll: true
        });
        
        var searchPanel = Ext.create('Ext.panel.Panel', {
            title: 'Tìm kiếm', region: 'north', layout: 'fit', collapsible: true, split: true, height: 140,
            items: [{
                xtype: 'form', bodyPadding: '10 10 10 10', autoScroll: true,
                fieldDefaults: {
                    msgTarget: 'side', labelWidth: 50, labelAlign: 'left'
                },
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    xtype: 'container', layout: 'hbox', anchor: '100%',
                    items: [{
                        xtype: 'container', flex: 1, border: false, layout: 'anchor',
                        items: [{
                            fieldLabel: 'Tiêu đề', id: 'cbbTitle', anchor: '95%', tabIndex: 1, xtype: 'combo',
                            store: titleComboStore, displayField: 'ReportTitle', valueField: 'ReportTitle', pageSize: 10, minChars: 1, hideTrigger: true, typeAhead: false,
                            listConfig: {
                                loadingText: 'Tìm kiếm', emptyText: 'Không có kết quả phù hợp',
                                getInnerTpl: function () {
                                    return '<div style="padding: 5px 5px 5px 10px; border-bottom: dotted 1px beige;">' +
                                        '{ReportTitle}' +
                                        '</div>';
                                }
                            }
                        }, {
                            fieldLabel: ' ', xtype: 'checkbox', checked: false, id: 'chkIsAll', boxLabel: 'Hiển thị toàn bộ báo cáo của nhân viên'
                        }]
                    }, {
                        xtype: 'container', flex: 1, border: false, layout: 'anchor',
                        items: [{
                            fieldLabel: 'Tuần', xtype: 'combo', id: 'cbbWeek', anchor: '95%', tabIndex: 2, minChars: 1, typeAhead: false, pageSize: false,
                            store: weekStore, valueField: 'StartWeek', displayField: 'Display',
                            listConfig: {
                                loadingText: 'Tìm kiếm', emptyText: 'Không có kết quả phù hợp',
                                getInnerTpl: function () {
                                    return '<div style="padding: 5px 5px 5px 10px; border-bottom: dotted 1px beige;">' +
                                            '{Display}' +
                                           '</div>';
                                }
                            }
                        }]
                    }]
                }],
                buttons: [{
                    text: 'Tìm kiếm',
                    handler: function () {
                        var sd = Ext.getCmp('cbbTitle').value;
                        var tt = Ext.getCmp('cbbWeek').findRecord('StartWeek', Ext.getCmp('cbbWeek').value);
                        
                        reportStore.getProxy().extraParams = {
                            startDate: (tt) ? tt.get('StartWeek') : '',
                            endDate: (tt) ? tt.get('EndWeek') : '',
                            title: (sd) ? sd : '',
                            isAll: Ext.getCmp('chkIsAll').getValue() ? 0 : 1
                        };
                        reportStore.load();
                    }
                }]
            }]
        });

        reportStore.getProxy().extraParams = {
            startDate: '',
            endDate: '',
            title: '',
            isAll: Ext.getCmp('chkIsAll').getValue() ? 0 : 1
        };
        reportStore.load();

        var tpl = new Ext.XTemplate(
            '<tpl for=".">',
                '<tpl for="raw">',
                    '<div id="taskDetail-wrapper" style="margin: 0 0 10px 0;">',
                        '<div class="taskDetail-title">',
                            '<div class="taskDetail-title-right">{#}. {ReportTitle}</div>',
                        '</div>',
                        '<div class="taskDetail-item">',
                            '<div class="taskDetail-item-left">Người tạo:</div>',
                            '<tpl for="Employee">',
                                '<div class="taskDetail-item-right">{FirstName} {LastName}</div>',
                            '</tpl>',
                        '</div>',
                        '<div class="taskDetail-item">',
                            '<div class="taskDetail-item-left">Ngày tạo:</div>',
                            '<div class="taskDetail-item-right">{CreateDate:date("d/m/Y H:i:s")}</div>',
                        '</div>',
                        '<div class="taskDetail-item">',
                            '<div class="taskDetail-item-left">Nội dung báo cáo:</div>',
                            '<div class="taskDetail-item-right">{ReportContent}</div>',
                        '</div>',
                    '</div>',
                '</tpl>',
            '</tpl>'
            );

        
        
        Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [panel, searchPanel]
        });

        
    });

</script>